<template>
  <div class="toast" v-show="show">
    <div>{{message}}</div>
  </div>
</template>

<script>
export default {
     name:'Toast',
     props:{
         message:{
             type:String,
             default:''
         },
         show:{
             type:Boolean,
             default:false
         }
     }
}
</script>

<style>
    .toast{
        position: fixed;
        top:50%;
        left: 50%;
        padding:10px 20px;

        transform: translate(-50%,-50%);

        color:#fff;
        background-color: rgba(0,0,0,0.4);
    }
</style>